import {View, Button, Text, Image} from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, {Component} from 'react';
import * as T from '../types';
import './renewalMemberModel.less';
import actions from '../actions/index';
import {connect} from 'react-redux';
import {store2Props} from '../selectors';
import moment from 'dayjs';
import {AtCurtain} from 'taro-ui';
import 'taro-ui/dist/style/components/curtain.scss';
import renewalMemberModelImage from '@/assets/image/index/joinMember.png';

interface ComponentState {
  renewalMemberModel: boolean;
}

type ITopProps = T.IProps & T.ITopProps & ComponentState;
//@ts-ignore
@connect<Partial<ITopProps>, T.ITopState>(store2Props, actions)
export default class Info extends Component<Partial<ITopProps>, T.ITopState> {
  constructor(props: ITopProps) {
    super(props);
    this.state = {};
  }

  render() {
    let {
      main: {memberInfo, renewalMemberModel},
      actions: {action},
    } = this.props;
    // @ts-ignore
    return (
      <AtCurtain
        // @ts-ignore
        isOpened={renewalMemberModel}
        onClose={() => {
          Taro.setStorageSync('renewalMemberModeldate', moment(new Date()).format('YYYY-MM-DD'));
          action.commonChange('main.renewalMemberModel', false);
        }}
      >
        <View className="renewalMemberModel">
          <Text className="renewalMemberModelText">尊贵的会员，您的会员即将到期，请立即续费以保障您的权益</Text>
          <Image className="renewalMemberModelbg" src={renewalMemberModelImage} />
          <View
            className="renewalMemberModelBtn"
            onClick={() => {
              Taro.setStorageSync('renewalMemberModeldate', moment(new Date()).format('YYYY-MM-DD'));
              action.commonChange('main.renewalMemberModel', false);
              Taro.navigateTo({url: '/pages/package-A/renewalMember/index'});
            }}
          >
            会员续费
          </View>
        </View>
      </AtCurtain>
    );
  }
}

//create by moon https://github.com/creasy2010/moon
